<template>
	<view>
		<zjy-tabs :tabs="tabs" :flex="true" :activeId="activeId" @tabClick="handleTabClick" bgColor="#ffffff" />
		<zjy-search placeholder="搜索产品名称" />
		<zjy-filters :data="filterData" @close="filterClose" />
		<scroll-view
			:scroll-y="true"
			@scrolltolower="loadMore"
			:refresher-enabled="true"
			:refresher-triggered="triggered"
			@refresherpulling="onPulling"
			@refresherrefresh="onRefresh"
			@refresherrestore="onRestore"
			@refresherabort="onAbort"
			class="plr-24 pt-24"
			:style="{
				height: scrollViewHeight,
			}"
		>
			<template v-if="listData && listData.length > 0">
				<view v-for="(item, index) in listData" :key="index" class="pb-16">
					<product-item :data="item" :type="type" />
				</view>
			</template>
			<zjy-empty emptyText="暂无数据" v-else-if="!freshing && searched"></zjy-empty>
		</scroll-view>
		<view v-if="type == 'collection'" class="bottom-fixed-wrap">
			<view class="flex-1 flex-a fs-28">
				<image :src="imgBaseUrl + 'icon-uncheck.png'" class="icon-48" />
				<text class="c-grey-4e ml-8">全选</text>
				<view class="c-grey-86 ml-16 flex">
					已选择
					<text class="c-brown-bc">3</text>
					个产品
				</view>
			</view>
			<zjy-button width="192" @click="navigateTo('/pages/promotion/product/collection-detail')">添加</zjy-button>
		</view>
	</view>
</template>
<script setup lang="ts">
import useCommonStore from "@/store/common"
import productItem from "./product-item.vue"
import type { ZjyTabItem } from "@/types/common"
import { freshLoading } from "@/utils/fresh-loading"
import { navigateTo } from "@/utils/page-redirect"
import { onLoad } from "@dcloudio/uni-app"
import zjyFilters from "@/components/zjy-filters/index.vue"
import { DistanceList, ScenicLevels, SortList } from "@/components/zjy-filters/constant"
import { getAttributeGroupList, getPublicPageWithResort } from "@/components/zjy-filters/service"
import { ProductTypes } from "@/constants/common"

defineProps({
	type: String,
})
const imgBaseUrl = inject("imgBaseUrl")
const commonStore = useCommonStore()
const tabs = ref<ZjyTabItem[]>([
	{
		id: "1",
		name: "景区门票",
	},
	{
		id: "2",
		name: "旅游线路",
	},
	{
		id: "3",
		name: "度假酒店",
	},
])
const activeId = ref("1")
const scrollViewHeight = `calc(100vh - ${commonStore.statusBarHeight + commonStore.navbarHeight}px - 264rpx)`
const searched = ref(false)

const handleTabClick = (id: string) => {
	activeId.value = id
}
const search = () => {}

//#region 初始化下拉刷新
const freshLoadingRef = freshLoading()
let {
	loadMore,
	triggered,
	onPulling,
	onRefresh,
	onRestore,
	onAbort,
	getListData,
	listData,
	freshing,
	getListSuccessCallback,
} = freshLoadingRef
freshLoadingRef.listService.value = null
getListSuccessCallback.value = () => {
	searched.value = true
}
freshLoadingRef.listData.value.push(...[1, 2])
//#endregion

//#region 筛选
const filterData = ref<any[]>([])
const filterClose = (data: any) => {
	console.log(data)
}
const initFilter = async () => {
	let areaResorts: any = await getPublicPageWithResort()
	let attrList: any = await getAttributeGroupList({ type: ProductTypes.TICKET })
	filterData.value = [
		{
			title: "全部景区",
			key: "resort",
			type: "scenic",
			value: areaResorts[0].resorts[0].id,
			data: areaResorts,
		},
		{
			title: "综合排序",
			key: "sort",
			type: "single",
			value: SortList[0].id,
			data: SortList,
		},
		{
			title: "位置距离",
			key: "distance",
			type: "single",
			value: DistanceList[0].id,
			data: DistanceList,
		},
		{
			title: "筛选",
			key: "filter",
			type: "group",
			data: ScenicLevels.concat(attrList),
		},
	]
}
//#endregion
onLoad(() => {
	initFilter()
})
</script>
<style lang="scss" scoped></style>
